<template>
    <div class="starArticle">
        <div style="flex:1">
            <div class="title">
                <div>收藏夹</div>
                <div>您已经收藏{{ StarList.length }}篇文章啦(╹ڡ╹ )</div>
            </div>
            <el-empty description="暂无收藏" style="flex:1" v-if="StarList.length < 1"></el-empty>
            <articleitem v-for="item in currentList" v-bind="item" :key="item.id" v-else />
            <div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;margin-bottom: 20px;"
                v-if="StarList.length > 0">
                <el-pagination background layout="prev, pager, next" :page-count="pagesum" :current-page.sync="pager"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
        <Right />
    </div>
</template>
<script>
import articleitem from '../components/article/articleitem.vue';
import Right from '../components/common/Right.vue';
import { getStarList } from '../api/api'
export default {
    name: 'starArticle',
    components: {
        articleitem,
        Right
    },
    data() {
        return {
            StarList: [],
            pagesum: 1,
            pager: 1,
            currentList: [],
        }
    },
    created() {
        getStarList().then(res => {
            this.StarList = res.data.data;
            this.pagesum = Math.ceil(this.StarList.length / 10);
            this.getcurrentList();
        })
    },
    methods: {
        getcurrentList() {
            let pager = this.pager;
            this.currentList = this.StarList.filter(function (value, index) {
                return (index >= (pager - 1) * 10 && index < pager * 10)
            })
        },
        handleCurrentChange(val) {
            this.pager = val;
            this.getcurrentList();
        },
    }
}
</script>

<style scoped="scoped">
.starArticle {
    margin: 10px;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.title {
    font-size: 14px;
    letter-spacing: 1px;
    padding: 10px;
    margin: 20px;
    font-weight: 600;
    border-bottom: 1px solid #e5e2e2;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
</style>